<template>
    <view class="header-box">
        <view class="header">
            <text class="title">趣味钓鱼00</text>
            <button @click="showCollection" class="collection-btn">
                <text>图鉴</text>
            </button>
        </view>


        <!-- 鱼类图鉴弹窗 -->
        <view class="collection-modal" v-if="showCollectionModal">
            <view class="modal-header">
                <text class="modal-title">鱼类图鉴</text>
                <button @click="closeCollection" class="close-modal-btn">×</button>
            </view>
            <view class="collection-content">
                <view class="fish-item" v-for="(fish, index) in fishTypes" :key="index">
                    <view class="fish-info">
                        <image :src="fish.image" class="fish-small-icon" mode="widthFix"></image>
                        <view class="fish-text">
                            <text class="fish-name">{{ fish.name }}</text>
                            <text class="fish-rate">概率: {{ (fish.rate * 100).toFixed(1) }}%</text>
                        </view>
                    </view>
                    <view class="collected-badge" :class="{ collected: isCollected(fish.id) }">
                        <text class="badge-text">{{ isCollected(fish.id) ? '已收集' : '未收集' }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showCollectionModal: false,
            // 鱼类数据
			fishTypes: [
				{
					id: 1,
					name: '普通草鱼',
					rate: 0.6,
					image: 'https://p3-doubao-search-sign.byteimg.com/tos-cn-i-be4g95zd3a/912895616645070884~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1777016350&x-signature=0qfRtaqXiWBxH47Yg5fZzOzj8c8%3D'
				},
				{
					id: 2,
					name: '金鱼',
					rate: 0.2,
					image: 'https://p3-doubao-search-sign.byteimg.com/tos-cn-i-be4g95zd3a/926015118238416959~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1777016350&x-signature=KZi3XYwzKI1AawX1veJRp%2Fa6jCQ%3D'
				},
				{
					id: 3,
					name: '鲈鱼',
					rate: 0.1,
					image: 'https://p3-doubao-search-sign.byteimg.com/tos-cn-i-be4g95zd3a/1002197547444863012~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1777016350&x-signature=qjMS4C%2Bly0FxK1p%2BouQqa0CpfbQ%3D'
				},
				{
					id: 4,
					name: '鲨鱼',
					rate: 0.05,
					image: 'https://p3-doubao-search-sign.byteimg.com/tos-cn-i-be4g95zd3a/916964050184700020~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1777016350&x-signature=oDlLMBVq8JRXjhZURuw72CsHJQA%3D'
				},
				{
					id: 5,
					name: '神秘鱼',
					rate: 0.05,
					image: 'https://p26-doubao-search-sign.byteimg.com/tos-cn-i-be4g95zd3a/2046788509128327178~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1777016349&x-signature=IHHyjAuwMh2Wk9YXP%2BuXpvNsgqc%3D'
				}
			],
        }
    },
    methods: {
        // 显示鱼类图鉴
        showCollection() {
            this.showCollectionModal = true;
        },

        // 检查鱼类是否已收集
		isCollected(fishId) {
			return this.collection.includes(fishId);
		}
    },
    onLoad() {

    }
}

</script>

<style lang='less' scoped></style>